
var vm = new Vue ({
    el:"#app",
    data:{
        message :"正在加载中…"
    },
    mounted(){
        axios
            .get('json/new.json')
            .then(response => (this.message = response.data.zhi))
            .catch (function (error) {
            console.log(error);
        })
    }
})





var t=document.querySelectorAll(".container li");

for(var i=0;i<t.length;i++){
    t[i].index=i;
    t[i].addEventListener('click',function () {
        for(var j=0;j<t.length;j++){
            t[j].classList.remove("active");
            t[this.index].classList.add("active")
        }
    })
}



window.onscroll=function () {
    console.log(document.documentElement.scrollTop)
    if (document.documentElement.scrollTop>0 && document.documentElement.scrollTop<550){
        for(var j=0;j<t.length;j++){
            t[j].classList.remove("active");
            t[0].classList.add("active")
        }
    }else if (document.documentElement.scrollTop>550 && document.documentElement.scrollTop<1100){
        for(var j=0;j<t.length;j++){
            t[j].classList.remove("active");
            t[1].classList.add("active")
        }
    }else if (document.documentElement.scrollTop>1100){
        for(var j=0;j<t.length;j++){
            t[j].classList.remove("active");
            t[2].classList.add("active")
        }
    }
}

var t1=document.querySelector("#tiao1")
var t2=document.querySelector("#tiao2")
var t3=document.querySelector("#tiao3")

t1.addEventListener('click',function () {
    window.scrollTo(0,0) ;
});
t2.addEventListener('click',function () {
    window.scrollTo(0,550) ;
});
t3.addEventListener('click',function () {
    window.scrollTo(0,1100) ;
});
var  n=document.querySelector(".yin");
var  c=document.querySelector(".cang");

var a=0;
    n.addEventListener('click',function () {
        a++;
        if(a==2){
            a=0
        }
        for (var z=0;z<2;z++){
            if (a==1){
                n.classList.add("bian");
                c.style.transition= ".5s";
                c.style.opacity=".98";
                c.style.top="100%";
                // setInterval(function () {
                //     c.style.top="100%"
                // })
            }else {
                c.style.transition= "0s";
                n.classList.remove("bian");
                c.style.opacity="0";
                c.style.top="500%";
            }
        }
    })

